<script>
export default {
  data() {
    return {
      username:'',
      isCollapse: true,
      myClass:"el-icon-s-unfold",
	  
	  
	  userInline: {
	    username: "",
	    pageNum: 1,
	    pageSize: 5,
	  },
	  userInline1:{
		  id:20
	  },
	  
	  userList: '',
	  total: 6,
	  title: "",
	  user: {
	    id: "",
	    username: "",
	    password: "",
	    nickname: "",
	    email: "",
	    phone: "",
	    point: "",
	  },
	  dialogFormVisible: false,
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
    };
  },
  methods: {
	
	  
	  queryUser() {
	    this.$http
	      .get("user", {
	        params: this.userInline1,
	      })
	      .then((res) => {
	        if (res.data.status == 200) {
	          this.userList = res.data.data.list[0];
			  console.log("hahhahahahaahahha")
			  console.log(this.userList)
	          this.total = res.data.data.total;
	        } else {
	          this.$message.error("查询失败");
	        }
	      });
	  },
	  
    // 处理顶部用户下拉框信息
    handleCommand(command) {
      //this.$message('click on item ' + command);
      if(command == 'logout'){
        sessionStorage.clear();
        this.$router.push('/login')
      }
	  
	  if(command == 'userInfo'){
		  this.queryUser()
	 this.dialogFormVisible=true
	  }
    },
    gb:function () {
      this.isCollapse = !this.isCollapse;
      if(this.myClass === "el-icon-s-unfold"){
        this.myClass = "el-icon-s-fold"
      }else {
        this.myClass = "el-icon-s-unfold"
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted(){
    this.username= sessionStorage.getItem('username');
	
  }
}
</script>

<template>
  <el-container>
    <!-- 左侧菜单 -->
    <el-menu default-active="/main" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <el-menu-item>
        <el-link class="el-icon-switch-button" :underline="false" @click="() => {
          this.$router.push('/login')
               this.$notify({
            title: '提示',
            message: '退出登录',
            type:'info'
          });
        }"></el-link>
      </el-menu-item>

      <el-menu-item index="/main/home">
        <i class="el-icon-s-home"></i>
        <span slot="title">网站首页</span>
      </el-menu-item>

      <el-submenu index="2">
        <template slot="title">
        <i class="el-icon-setting"></i>
        <span slot="title">系统管理</span>
        </template>

        <el-menu-item-group>
          <el-menu-item index="/main/shop-service">系统用户管理</el-menu-item>
          <el-menu-item index="/main/user">普通用户管理</el-menu-item>
          <el-menu-item index="/main/goods-service">公告管理</el-menu-item>

          <el-menu-item index="/main/company">公司管理</el-menu-item>
          <el-menu-item index="/main/notice">通知管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-grid"></i>
          <span slot="title">课程管理</span>
        </template>

        <el-menu-item-group>

          <el-menu-item index="/main/courseType">课程分类管理</el-menu-item>
          <el-menu-item index="/main/courseManager">课程管理</el-menu-item>
          <el-menu-item index="/main/courseMark">课程评价管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span slot="title">师资管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/main/zxsgl">咨询师管理</el-menu-item>
          <el-menu-item index="/main/order-selected">咨询师等级管理</el-menu-item>
          <el-menu-item index="/main/sales-selected">擅长领域管理</el-menu-item>
          <el-menu-item index="/main/chargetype">收费分类管理</el-menu-item>
          <el-menu-item index="/main/charge">收费标准管理</el-menu-item>
        </el-menu-item-group>

      </el-submenu>

      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-tickets"></i>
          <span slot="title">内容管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/main/article">文章管理</el-menu-item>
          <el-menu-item index="/main/order-selected">文章分类管理</el-menu-item>
          <el-menu-item index="/main/sales-selected">心理知识管理</el-menu-item>
          <el-menu-item index="/main/goods-selected">FM管理</el-menu-item>
          <el-menu-item index="/main/free">公益中心管理</el-menu-item>
          <el-menu-item index="/main/heartMark">心理测评管理</el-menu-item>
        </el-menu-item-group>

      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-chat-line-round"></i>
          <span slot="title">心理答疑管理</span>
        </template>
        <el-menu-item-group>

          <el-menu-item index="/main/question-manage">问题管理</el-menu-item>

          <el-menu-item index="/main/reply">回复管理</el-menu-item>
        </el-menu-item-group>

      </el-submenu>
      <el-submenu index="7">
        <template slot="title">
          <i class="el-icon-date"></i>
          <span slot="title">咨询预约管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/main/Appointment">咨询预约管理</el-menu-item>
<!--          <el-menu-item index="/main/order-selected">咨询回复管理</el-menu-item>-->
          <el-menu-item index="/main/Usermark">用户评价表</el-menu-item>
        </el-menu-item-group>

      </el-submenu>
    </el-menu>

    <el-container>
      <!-- 头部 -->
      <el-header>
        <el-link :underline="false" :class="myClass" v-model="isCollapse" @click="gb" style="font-size: 24px;margin-top: 22px;   filter: invert(1) sepia(1) saturate(5) brightness(1) contrast(1);"></el-link>
        <div class="header-right">
          <!-- @command：是函数，专门处理下拉框中的请求事件的  -->
          <el-dropdown @command="handleCommand" trigger="click">
					<span class="el-dropdown-link">
						<img src="../assets/logo.png" alt="">
						<span style="color: white;font-size: 10px;font-weight: bolder">你好, {{username}}</span>
					</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item  command="userInfo">个人中心</el-dropdown-item>
              <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="system">系统设置</el-dropdown-item>
              <el-dropdown-item  command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
	  
      <!-- 展示页面 -->
      <el-main>
		  <!-- 新增修改弹出框 -->
		  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancal">
		    <el-form :model="userList">
		      <el-form-item label="用户名" label-width="80px">
		        <el-input
		          v-model="userList.username"
		          placeholder="请输入用户名"
		        ></el-input>
		      </el-form-item>
		      <el-form-item label="密码" label-width="80px">
		        <el-input v-model="userList.password" placeholder="请输入密码"></el-input>
		      </el-form-item>
		      <el-form-item label="昵称" label-width="80px">
		        <el-input v-model="userList.nickname" placeholder="请输入昵称"></el-input>
		      </el-form-item>
		      <el-form-item label="邮箱" label-width="80px">
		        <el-input v-model="userList.email" placeholder="请输入邮箱"></el-input>
		      </el-form-item>
		      <el-form-item label="手机" label-width="80px">
		        <el-input v-model="userList.phone" placeholder="请输入手机"></el-input>
		      </el-form-item>
		    </el-form>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="cancal">取 消</el-button>
		      <el-button type="primary" @click="insertAndUpdateSuccess"
		        >确 定</el-button
		      >
		    </div>
		  </el-dialog>
		  
		  
        <transition name="fade" mode="out-in" appear>
			
          <router-view></router-view>
        </transition>
		
		
		
		
		
      </el-main>
    </el-container>

  </el-container>
</template>

<style scoped>
.header-right {
  float: right;
  line-height: 60px;
}
.header-right img {
  height: 30px;
  vertical-align: middle;
}
/*整体样式设计*/
.el-container {
  height: 100vh
}
.el-header{
  background-color: #526D82;
  color: #DDE6ED;
  position: relative;
  height: 8% !important;
}
.el-main {
  position: relative;
  background-color: #DDE6ED;
  color: #526D82;
  height: 92% !important;
}
/*左侧伸缩菜单*/
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu-vertical-demo {
  height:100% !important;
  overflow-y: auto;
}
/*过渡动画*/
.fade-enter-active, .fade-leave-active {
  transition: all .4s ease;
}
.fade-enter, .fade-leave-to {
  transform: translateX(38px);
  opacity: 0;
}
.fade-enter-to,.fade-leave {
  opacity: 1;
}
</style>